<template>
  <div v-show="visible" :style="{ left: position.x + 'px', top: position.y + 'px' }"
      class="draggable" @mousedown="startDrag">
    <audio id="dingding">
      <source src="@/assets/music/dingding.mp3" type="audio/mpeg">
    </audio>
    <div class="call-content">
      <div class="caller-info">
        <div class="avatar">
          <i class="el-icon-user-solid"></i>
        </div>
        <!--        <div class="name">{{ callerName }}</div>-->
        <div class="status">邀请您加入会诊会议,会议室：{{roomId }}</div>
      </div>

      <div class="call-actions">
        <div class="action-btn reject" @click="handleReject">
          <img src="@/assets/img/remote/挂断.png" alt="挂断">
        </div>
        <div class="action-btn accept" @click="handleAccept">
          <img src="@/assets/img/remote/接听.png" alt="接听">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CallDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    roomId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      position: { x: window.innerWidth / 2 - 180, y: window.innerHeight / 2 - 250 }, // Centered based on assumed dialog dimensions
      isDragging: false,
      offset: { x: 0, y: 0 },
    };
  },
  methods: {
    startDrag(event) {
      this.isDragging = true;
      this.offset.x = event.clientX - this.position.x;
      this.offset.y = event.clientY - this.position.y;
      window.addEventListener('mousemove', this.onDrag);
      window.addEventListener('mouseup', this.stopDrag);
    },
    onDrag(event) {
      if (this.isDragging) {
        const newX = event.clientX - this.offset.x;
        const newY = event.clientY - this.offset.y;

        // Ensure the dialog stays within the viewport
        this.position.x = Math.max(0, Math.min(newX, window.innerWidth - 360)); // Assuming dialog width is 360px
        this.position.y = Math.max(0, Math.min(newY, window.innerHeight - 100)); // Assuming dialog height is 100px
      }
    },
    stopDrag() {
      this.isDragging = false;
      window.removeEventListener('mousemove', this.onDrag);
      window.removeEventListener('mouseup', this.stopDrag);
    },
    handleAccept() {
      this.$emit('accept');
    },
    handleReject() {
      this.$emit('reject');
    },
  },
};
</script>
<style scoped lang="scss">
.draggable {
  width: 360px;
  position: fixed;
  cursor: move;
  z-index: 999;
  background: rgba(0,0,0,0.8);
  border-radius: 12px;
  animation: dialogFadeIn 0.3s ease;
}

.call-content {
  padding: 30px 20px;
}

.caller-info {
  text-align: center;
  margin-bottom: 40px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e6e6e6;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar i {
  font-size: 40px;
  color: #909399;
}

.status {
  font-size: 14px;
  color: #909399;
}

.call-actions {
  display: flex;
  justify-content: center;
  gap: 60px;
}

.action-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.action-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.action-btn:hover {
  transform: scale(1.1);
}

.action-btn:active {
  transform: scale(0.95);
}

.accept {
  animation: pulse 1.5s infinite;
}

@keyframes dialogFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(82, 196, 26, 0.4);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(82, 196, 26, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(82, 196, 26, 0);
  }
}
</style>
